<template>
  <el-container>
    <el-header></el-header>
    <el-main>
      <el-row>
        <el-col :span="14" :offset="5">
          <el-card :body-style="{ padding: '0px' }">
            <div slot="header" class="header">
              <el-link type="success" @click="back">←  Back</el-link>
              <el-button class="like_bt" @click="click" :disabled="goodsDetail.isLike">❤</el-button>
            </div>
            <div class="body">
              <div>
                  <el-carousel height="300px" direction="vertical" :autoplay="false" class="card">
                    <!-- <el-carousel-item v-for="item in goodsDetail.pictures" :key="item"> -->
                    <el-carousel-item >
                     <div class="img">
                       <el-image style="height: 280px;width: auto" src="../../../static/3.jpg" fit="scale-down"></el-image>
                     </div>
                    </el-carousel-item>
                  </el-carousel>
              <el-row>
                <el-col :span="12">
                  <div class="left bgCo6">
                    <span class="title">title</span>
                    <span class="price">¥100</span>
                    <span class="des">desc</span>
                  </div></el-col>
                <el-col :span="12">
                  <div class="right bgCo7">
                    <div class="da">
                        <div class="visit">
                          <span class="visit_span">被浏览 :</span>
                          <div class="visit_number">
                            <el-image style="height: 20px;width: 20px" src="../../../static/3.jpg"></el-image>
                            <span class="vn">{{goodsDetail.visit}}</span>
                          </div>
                        </div>
                        <div class="like">
                          <span class="visit_span">被喜欢 :</span>
                          <div class="visit_number">
                            <el-image  style="height: 20px;width: 20px" src="../../../static/3.jpg"></el-image>
                            <span class="vn">{{goodsDetail.like}}</span>
                          </div>
                        </div>
                        <div class="rate">
                          <span class="visit_span">评分 :</span>
                          <div class="visit_number">
                            <el-rate
                              v-model="goodsDetail.score"
                              disabled
                              show-text
                              :texts="texts"
                              text-color="#ff9900"
                            >
                            </el-rate>
                          </div>
                        </div>
                    </div>
                    <div class="sellerMessage">
                      <i class="el-icon-user-solid">商家名称:</i>
                    </div>
                    <div class="sellerMessage">
                    <i class="el-icon-phone">联系电话:1234567890</i>&nbsp&nbsp
                      <!-- <i class="el-icon-phone">:联系电话</i> -->
                    </div>

                    <el-button type="primary" @click="buy">下单</el-button>
                  </div>
                </el-col>
              </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<script>

    export default {
      name: "GoodsDetil",
      data(){
          return{
            goodsId:'',
            goodsDetail:{
              pictures:[],
              title:'',
              price:'',
              des:'',
              score:4,
              visit:'',
              like:'',
              scoreTimes:'',
              isLike:false
            },
            sellerContact:{},
            rate:0,
            texts:['很不值','不值','一般','很值','无脑入']
          }
        },
      methods:{
        buy(){

        this.$router.push("/buyServer");
         },
        load(){
          this.getGoodsDetail();
          this.getGoodsScore();
        },
        //获取商品详细信息
        getGoodsDetail(){
          let _this=this;
          this.$axios.get("/goods/getGoodsDetail?id="+this.goodsId).then(res=>{
            _this.goodsDetail.pictures=res.bean.dalItem.picturesurl.split(",");
            _this.goodsDetail.title=res.bean.dalItem.title;
            _this.goodsDetail.price=res.bean.dalItem.price;
            _this.goodsDetail.des=res.bean.dalItem.des;
            _this.sellerContact=res.bean.userContact.contact;
            _this.sellerContact.sellerName=res.bean.userContact.userName;
          })
        },
        click(){
          debugger;
        },
        //返回上一层
        back(){
          this.$router.back();
        },
        changeScore(score){
          let _this=this;
          this.$axios.get("/goods/changeGoodsScore?id="+this.goodsId+"&number="+score+"&type="+"score").then(
            res=>{
              this.getGoodsScore();
            }
          );

        },
        getGoodsScore(){
          let _this=this;
          this.$axios.get("/goods/getGoodsScore?id="+this.goodsId).then(res=>{
            _this.goodsDetail.visit=res.bean.itemVisit;
            _this.goodsDetail.like=res.bean.itemLike;
            _this.goodsDetail.score=parseInt(res.bean.itemSorce);
            _this.goodsDetail.scoreTimes=res.bean.itemSorceTime;
          })
        }
      },
      // mounted() {
      //   this.goodsId=this.$route.query.id;
      //   this.load();
      // },
      // beforeCreate() {
      //   document.body.style.backgroundColor="rgb(175,215,237)";
      // },
      // beforeDestroy() {
      //   document.body.style.backgroundColor="";
      // }
    }
</script>
<style>
  .header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .like_bt{
  height: 30px;
  }
  .back{
    display: block;

  }
  .body{
    padding: 0;
  }
  .img{
    height: 300px;
  }
  .card{
    margin-top: 8px;
    border-bottom: #999999 solid 3px;
  }
  .left{
    display: flex;
    padding-left: 30px;
    flex-direction: column;
    align-items: flex-start;
    height: 200px;

  }
  .title{
    padding-top: 15px;
    font-size: 30px;
    font-weight: bold;
    font-family: PingFang SC;
  }
  .price{
    font-style: italic;
    font-size: 15px;
  }
  .des{
    padding-top: 18px;
  }
  .right{
    display: flex;
    flex-direction: column;
    height: 200px;
  }
  .da{
    display: flex;
    height: 80px;
  }
  .visit{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100px;
    padding-top: 25px;
    padding-left: 10px;
  }
  .like{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100px;
    padding-top: 25px;
    padding-left: 20px;
  }
  .rate{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100px;
    padding-top: 25px;
    padding-left: 20px;
  }
  .visit_span{
    height: 20px;
    font-size: 14px;
    font-style: italic;
  }
  .visit_number{
    display: flex;
    flex-direction: row;
    height: 20px;
    margin-top: 6px;
    font-size: 10px;
  }
  .vn{
    padding-left: 5px;
    height: 20px;
    line-height: 20px;
  }
  .rated{
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    padding-top: 5px;
    font-size: 15px;
    font-weight: bold;
  }
  .sellerMessage{
    display: flex;
    margin-top: 20px;
    margin-left: 10px;

  }

  .bgCo1{
    background-color: rgb(92,167,186);
  }
  .bgCo2{
    background-color: rgb(175,215,237);
  }
  .bgCo3{
    background-color: rgb(147,224,255);
  }
  .baCo4{
    background-color: rgb(255,66,93);
  }
  .bgCo5{
    background-color: rgb(199,237,233);
  }
  .bgCo6{
    background-color: rgb(237, 242, 245);
  }
  .bgCo7{
    background-color: rgb(251, 250, 243);
  }

</style>
